<template>
Search Products
    <el-input v-model="categoryId" @input="search()"></el-input>
    <div class="space"></div>
    <el-table :data="products" stripe style="width: 100%">
    <el-table-column prop="productId" label="Product Id" width="180" />
    <el-table-column prop="categoryId" label="Category" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column>
        <template #default="scope">
            <el-button @click="redirect(scope.row.productId)">view&nbsp;{{scope.row.name}}&nbsp;items</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import router from '../router'
export default {
    name: "product",
    props: {
        categoryId: String
    },
      setup(props){
        const products = ref([])
        console.log(props.categoryId);
        const getProduct = (category) => {
            return axios.get("/product/products/"+category).then(res => {
                console.log(res.data);
                return res;
            }).catch(e => {
                return e.res.data;
            })
        }
        const redirect = (productId) => {
            router.push({ path: "/item/" + productId });
            // location.reload();
        }

        const search = async function(){
            const data = await getProduct(props.categoryId);
            products.value = data.data.data;
        }

        onMounted(async () => {
            const data = await getProduct(props.categoryId);
            products.value = data.data.data;
        })
        return{
            products,
            redirect,
            search
        }
    }

}
</script>

<style scoped>
.space{
    width: 100%;
    height: 20px;
}
</style>